<template>
  <div>
    <span class="iconfont icon-guanbi close" @click="close"></span>
    <div class="search-bg">
      <div class="search-wap">
        <div class="search">
          <input v-model="keyword" @input="keyInput" placeholder="输入歌曲名/歌手名/关键字搜索" class="input"></input>
          <span v-show="keyword" class="iconfont icon-guanbi2fill" @click="clear"></span>
        </div>
        <div class="search-btn" @click="clickSearch">搜 索</div>
      </div>
      <div class="search-list">
        <template v-if="musicList.length>0">
          <div class="search-item search-title">
            <div class="t1">歌曲名</div>
            <div class="t2">歌手名</div>
            <div class="t3">操作</div>
          </div>
          <div class="list">
            <div class="search-item " @click.stop="play(item.id)" v-for="item in musicList">
              <div class="t1" v-html="item.music"></div>
              <div class="t2" v-html="item.singer"></div>
              <div class="t3">
                <span class="iconfont icon-bofang"></span>
              </div>
            </div>
            <el-pagination class="page" :page-size="limit" background layout="prev, pager, next" :total="total"
                           @current-change="currentChange">
            </el-pagination>
          </div>
        </template>
        <div class="no-data" v-else>
          <div class="singer-list">
          <span class="no-data-tag" @click="tagCheck(item.key)" :style="'background-color: '+randomColor(index)"
                v-for="(item,index) in singerList">{{ item.key }}</span>
          </div>
        </div>
      </div>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script>
import {searchMusic, musicInfo} from "@/api";

export default {
  name: "searchMusic",
  data() {
    return {
      keyword: '',
      musicList: [],
      limit: 20,
      page: 1,
      total: 0,
      singerList: [
        {
          "key": "陈奕迅",
          "doc_count": 523
        },
        {
          "key": "周杰伦",
          "doc_count": 265
        },
        {
          "key": "张杰",
          "doc_count": 191
        },
        {
          "key": "林俊杰",
          "doc_count": 183
        },
        {
          "key": "张学友",
          "doc_count": 178
        },
        {
          "key": "许嵩",
          "doc_count": 178
        },
        {
          "key": "萧敬腾",
          "doc_count": 160
        },
        {
          "key": "林宥嘉",
          "doc_count": 156
        },
        {
          "key": "薛之谦",
          "doc_count": 150
        },
        {
          "key": "华晨宇",
          "doc_count": 137
        },
        {
          "key": "李宇春",
          "doc_count": 134
        },
        {
          "key": "张国荣",
          "doc_count": 118
        },
        {
          "key": "谭咏麟",
          "doc_count": 111
        },
        {
          "key": "李荣浩",
          "doc_count": 105
        },
        {
          "key": "昼夜",
          "doc_count": 93
        },
        {
          "key": "王菲",
          "doc_count": 81
        },
        {
          "key": "Various Artists",
          "doc_count": 79
        },
        {
          "key": "Beyond",
          "doc_count": 78
        },
        {
          "key": "胡夏",
          "doc_count": 77
        },
        {
          "key": "祁隆",
          "doc_count": 70
        },
        {
          "key": "周华健",
          "doc_count": 64
        },
        {
          "key": "汪苏泷",
          "doc_count": 63
        },
        {
          "key": "邓丽君",
          "doc_count": 63
        },
        {
          "key": "王琪",
          "doc_count": 61
        },
        {
          "key": "李克勤",
          "doc_count": 56
        },
        {
          "key": "梁静茹",
          "doc_count": 56
        },
        {
          "key": "易烊千玺",
          "doc_count": 55
        },
        {
          "key": "五月天",
          "doc_count": 52
        },
        {
          "key": "黎明",
          "doc_count": 50
        },
        {
          "key": "张信哲",
          "doc_count": 48
        },
        {
          "key": "任贤齐",
          "doc_count": 46
        },
        {
          "key": "陈慧娴",
          "doc_count": 46
        },
        {
          "key": "刘德华",
          "doc_count": 44
        },
        {
          "key": "吴奇",
          "doc_count": 44
        },
        {
          "key": "林忆莲",
          "doc_count": 44
        },
        {
          "key": "伍佰 & China Blue",
          "doc_count": 43
        },
        {
          "key": "ZJ沙楠杰",
          "doc_count": 41
        },
        {
          "key": "葛阳",
          "doc_count": 38
        },
        {
          "key": "G.E.M.邓紫棋",
          "doc_count": 36
        },
        {
          "key": "周深",
          "doc_count": 36
        },
        {
          "key": "李宗盛",
          "doc_count": 35
        },
        {
          "key": "王力宏",
          "doc_count": 35
        },
        {
          "key": "陈慧琳",
          "doc_count": 35
        },
        {
          "key": "Party Tyme Karaoke",
          "doc_count": 34
        },
        {
          "key": "王嘉尔",
          "doc_count": 34
        },
        {
          "key": "草蜢",
          "doc_count": 34
        },
        {
          "key": "高胜美",
          "doc_count": 34
        },
        {
          "key": "",
          "doc_count": 33
        },
        {
          "key": "林子祥",
          "doc_count": 33
        },
        {
          "key": "齐秦",
          "doc_count": 33
        },
        {
          "key": "徐小凤",
          "doc_count": 31
        },
        {
          "key": "王杰",
          "doc_count": 31
        },
        {
          "key": "雪无影",
          "doc_count": 31
        },
        {
          "key": "米津玄師",
          "doc_count": 30
        },
        {
          "key": "张韶涵",
          "doc_count": 29
        },
        {
          "key": "杨千嬅",
          "doc_count": 29
        },
        {
          "key": "群星",
          "doc_count": 29
        },
        {
          "key": "Raimond Lap",
          "doc_count": 28
        },
        {
          "key": "郑源",
          "doc_count": 28
        },
        {
          "key": "A-Lin",
          "doc_count": 27
        },
        {
          "key": "就是南方凯",
          "doc_count": 27
        },
        {
          "key": "蓝心羽",
          "doc_count": 27
        },
        {
          "key": "郭富城",
          "doc_count": 27
        },
        {
          "key": "刘若英",
          "doc_count": 26
        },
        {
          "key": "张靓颖",
          "doc_count": 26
        },
        {
          "key": "莫文蔚",
          "doc_count": 26
        },
        {
          "key": "凤凰传奇",
          "doc_count": 25
        },
        {
          "key": "孟庭苇",
          "doc_count": 25
        },
        {
          "key": "许冠杰",
          "doc_count": 25
        },
        {
          "key": "蔡依林",
          "doc_count": 24
        },
        {
          "key": "谢霆锋",
          "doc_count": 24
        },
        {
          "key": "佚名",
          "doc_count": 23
        },
        {
          "key": "周慧敏",
          "doc_count": 23
        },
        {
          "key": "毛不易",
          "doc_count": 23
        },
        {
          "key": "罗大佑",
          "doc_count": 23
        },
        {
          "key": "钟镇涛",
          "doc_count": 23
        },
        {
          "key": "马杰",
          "doc_count": 23
        },
        {
          "key": "Westlife",
          "doc_count": 22
        },
        {
          "key": "古巨基",
          "doc_count": 22
        },
        {
          "key": "孙燕姿",
          "doc_count": 22
        },
        {
          "key": "赵传",
          "doc_count": 22
        },
        {
          "key": "黄凯芹",
          "doc_count": 22
        },
        {
          "key": "Billie Eilish",
          "doc_count": 21
        },
        {
          "key": "那英",
          "doc_count": 21
        },
        {
          "key": "BY2",
          "doc_count": 20
        },
        {
          "key": "丁当",
          "doc_count": 20
        },
        {
          "key": "小眼鑫",
          "doc_count": 20
        },
        {
          "key": "排骨教主",
          "doc_count": 20
        },
        {
          "key": "蔡健雅",
          "doc_count": 20
        },
        {
          "key": "蔡琴",
          "doc_count": 20
        },
        {
          "key": "陈淑桦",
          "doc_count": 20
        },
        {
          "key": "Perlman Itzhak",
          "doc_count": 19
        },
        {
          "key": "ROSÉ",
          "doc_count": 19
        },
        {
          "key": "Richard Clayderman",
          "doc_count": 19
        },
        {
          "key": "Taylor Swift",
          "doc_count": 19
        },
        {
          "key": "区瑞强",
          "doc_count": 19
        },
        {
          "key": "吴亦凡",
          "doc_count": 19
        },
        {
          "key": "吴雨霏",
          "doc_count": 19
        },
        {
          "key": "姜育恒",
          "doc_count": 19
        },
        {
          "key": "河图",
          "doc_count": 19
        }
      ]
    }
  },
  computed: {},
  mounted() {
    // this.search();
  },
  methods: {
    keyInput: function (e) {
      if (!this.keyword) {
        this.clear();
      }
    },
    clear: function () {
      this.musicList = [];
      this.page = 1;
      this.total = 0;
      this.keyword = '';
    },
    tagCheck: function (key) {
      this.page = 1;
      this.keyword = "歌手" + key;
      this.search();
    },
    randomColor: function (index) {
      var i = index % 4;
      var colors = ['#18A05E', '#DD5044', '#eebc31', '#0474B5'];
      return colors[i];
    },
    randomNum: function (min, max) {
      var range = max - min;
      var rand = Math.random();
      var num = min + Math.round(rand * range);
      console.log(num)
      return num;
    },
    currentChange: function (val) {
      this.page = val;
      this.search()
    },
    close: function () {
      this.$emit("close")
    },
    clickSearch: function () {
      this.page = 1;
      this.search();
    },
    search: function () {
      let loading = this.$loading({
        target: ".search-list",
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      searchMusic(this.keyword, this.page).then(res => {
        loading.close()
        this.musicList = res.data.list;
        this.total = res.data.count;
        // this.$notify.success("查询成功")
      }, e => {
        loading.close()
      })
    },
    openPlay: function () {
      window.open('/music#', "play")
    },
    play: function (id) {
      musicInfo(id).then(res => {
        var item = res.data;
        var playList = window.localStorage.getItem("playList");
        if (!playList) {
          playList = [];
          playList.push(item);
        } else {
          playList = JSON.parse(playList);
          var tag = false;
          for (var i = 0; i < playList.length; i++) {
            var playItem = playList[i];
            if (item.music == playItem.music && item.singer == playItem.singer) {
              tag = true;
              playList.splice(i, 1);
              break;
            }
          }
          playList.unshift(item);
        }
        window.localStorage.setItem("playList", JSON.stringify(playList));
        this.$emit("checkMusic")
      })


    },

    browserRedirect() {

      var sUserAgent = navigator.userAgent.toLowerCase();

      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";

      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";

      var bIsMidp = sUserAgent.match(/midp/i) == "midp";

      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";

      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";

      var bIsAndroid = sUserAgent.match(/android/i) == "android";

      var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";

      var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";


      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

        return "phone";

      } else {

        return "pc";

      }

    }
  }
}
</script>

<style scoped>
/deep/ .highlight {
  color: #3BCF8D !important;
}

.close {
  font-size: 30px;
  color: #FFFFFF;
  position: fixed;
  top: 20px;
  font-weight: 600;
  right: 20px;
  display: block;
}

.openplay {
  color: #3BCF8D;
  cursor: pointer;
}

/deep/ .el-pagination .active {
  background-color: #3BCF8D !important;
}

/deep/ .el-pagination .number:hover {
  color: #3BCF8D !important;
}

.page {
  margin-top: 20px;
}

.t1 {
  flex: 6;
  padding-left: 10px;

}

.t2 {
  flex: 2;
}

.t3 {
  flex: 1;
  text-align: center;
  padding-right: 10px;
}

.t3 .iconfont {
  color: #3BCF8D;
  font-size: 18px;
}

.search-title {
  color: #999999 !important;
}

.search-item:hover {
  background-color: rgba(229, 226, 226, 0.6);
  transition: background-color 0.2s linear 0s;
  border-radius: 8px;
}

.search-item {
  display: flex;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  color: #FFFFFF;
  cursor: pointer;
  overflow: hidden;
}

.list {
  flex: 1;
}

.no-data-tag {
  font-size: 16px;
  padding: 2px 5px;
  margin: 5px 5px;
  border-radius: 5px;
  cursor: pointer;
}

.no-data {
}

.singer-list {
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 18px;
}

.search-list {
  width: 80%;
  margin: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}


.search-wap {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  margin: auto;
  opacity: 0.9;
}

.search-btn {
  background-color: #3BCF8D;
  color: #FFFFFF;
  height: 54px;
  min-width: 120px;
  border-radius: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 54px;
  margin-left: 20px;
  cursor: pointer;
}

.view {
  background-color: #999999;
}

.input {
  height: 30px;
  background: none;
  outline: none;
  border: none;
  flex: 1;
  font-size: 18px;
}

.search .iconfont {
  color: #999999;
  font-size: 22px;
}

.search {
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  flex: 1;
  height: 50px;
  border-radius: 50px;
  /*border: 2px solid #3BCF8D;*/
  background-color: #FFFFFF;

}

.search-bg {
  width: 100%;
  overflow: auto;
  height: 100%;
  padding-bottom: 100px;
  z-index: 1000000;
  background-color: rgba(0, 0, 0, .9);
}

</style>